<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI作曲</title>
</head>
<body>
    <div class="layui-container-fluid">

            <div class="layui layui-card">
                <div class="layui-card-header">
                    <div class="layui-row">
                        <div class="layui-col-md-6">
                            <h3>AI作曲</h3>
                        </div>
                    </div>
                </div>
                <div class="layui-card-body">
                <div class="layui layui-form">
                    <div class="layui-form-item">
                        <label class="layui-form-label">选择AI模型</label>
                        <div class="layui-input-block">
                            <select name="model" lay-verify="required">
                                <option value="auto" selected>auto</option>
                                <option value="mureka-5.5">mureka-5.5</option>
                                <option value="mureka-6">mureka-6</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">歌词</label>
                        <div class="layui-input-block">
                            <textarea name="lyrics" class="layui-textarea"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">提示词</label>
                        <div class="layui-input-block">
                            <textarea name="prompt" lay-verify="required" class="layui-textarea"></textarea>
                            <div class="layui-form-item">
                                <input type="checkbox" name="demo1" id="lyrics" lay-skin="tag" title="R&B">
                                <input type="checkbox" name="demo1" id="lyrics" lay-skin="tag" title="slow">
                                <input type="checkbox" name="demo1" id="lyrics" lay-skin="tag" title="passionate">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">生成歌曲</label>
                        <div class="layui-input-block">
                            <button type="button" class="layui-btn layui-btn-normal" id="generate-music">生成歌曲</button>
                        </div>
                    </div>   

                    <!-- <div class="layui-form-item">
                        <label class="layui-form-label">歌曲上传</label>
                        <div class="layui-input-block">
                            <div class="layui-upload">
                                <div class="layui-upload-list">
                                    <table class="layui-table">
                                    <colgroup>
                                        <col style="min-width: 100px;">
                                        <col width="150">
                                        <col width="260">
                                        <col width="150">
                                    </colgroup>
                                    <thead>
                                        <th>文件名</th>
                                        <th>大小</th>
                                        <th>上传进度</th>
                                        <th>操作</th>
                                    </thead>
                                    <tbody id="ID-upload-demo-files-list"></tbody>
                                    </table>
                                </div>
                                <button type="button" class="layui-btn layui-btn-normal" id="ID-upload-demo-files">选择文件</button> 
                                <button type="button" class="layui-btn" id="ID-upload-demo-files-action">开始上传</button>
                            </div>
                        </div>
                    </div> -->
                </div>
            </div>
    </div>
</body>
<script src="//unpkg.com/layui@2.11.4/dist/layui.js"></script>
<script>
const AUTH_KEY = 'op_mbuexf7qLG9pCgSAtmvfhuDXdGCtPZ6'
const statusEnum = ['preparing', 'queued', 'running', 'succeeded', 'failed', 'timeouted', 'cancelled' ]
var layerIndex, layerStatus
layui.use(function(){
    var upload = layui.upload;
    var element = layui.element;
    var $ = layui.$;
    var form = layui.form;
    var layer = layui.layer;
    var table = layui.table;
    // 制作多文件上传表格
    var uploadListIns = upload.render({
        elem: '#ID-upload-demo-files',
        elemList: $('#ID-upload-demo-files-list'), // 列表元素对象
        url: '', // 实际使用时改成您自己的上传接口即可。
        accept: 'file',
        multiple: true,
        number: 3,
        auto: false,
        bindAction: '#ID-upload-demo-files-action',
        choose: function(obj){   
            var that = this;
            var files = this.files = obj.pushFile(); // 将每次选择的文件追加到文件队列
            // 读取本地文件
            obj.preview(function(index, file, result){
                var tr = $(['<tr id="upload-'+ index +'">',
                '<td>'+ file.name +'</td>',
                '<td>'+ (file.size/1024).toFixed(1) +'kb</td>',
                '<td><div class="layui-progress" lay-filter="progress-demo-'+ index +'"><div class="layui-progress-bar" lay-percent=""></div></div></td>',
                '<td>',
                    '<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>',
                    '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>',
                '</td>',
                '</tr>'].join(''));
                
                // 单个重传
                tr.find('.demo-reload').on('click', function(){
                    obj.upload(index, file);
                });
                
                // 删除
                tr.find('.demo-delete').on('click', function(){
                    delete files[index]; // 删除对应的文件
                    tr.remove(); // 删除表格行
                    // 清空 input file 值，以免删除后出现同名文件不可选
                    uploadListIns.config.elem.next()[0].value = ''; 
                });
                
                that.elemList.append(tr);
                element.render('progress'); // 渲染新加的进度条组件
            });
        },
        done: function(res, index, upload){ // 成功的回调
            var that = this;
            // if(res.code == 0){ // 上传成功
            var tr = that.elemList.find('tr#upload-'+ index)
            var tds = tr.children();
            tds.eq(3).html(''); // 清空操作
            delete this.files[index]; // 删除文件队列已经上传成功的文件
            return;
            //}
            this.error(index, upload);
        },
        allDone: function(obj){ // 多文件上传完毕后的状态回调
            console.log(obj)
        },
        error: function(index, upload){ // 错误回调
            var that = this;
            var tr = that.elemList.find('tr#upload-'+ index);
            var tds = tr.children();
            // 显示重传
            tds.eq(3).find('.demo-reload').removeClass('layui-hide');
        },
        progress: function(n, elem, e, index){ // 注意：index 参数为 layui 2.6.6 新增
            element.progress('progress-demo-'+ index, n + '%'); // 执行进度条。n 即为返回的进度百分比
        }
    });
    // 上传按钮点击事件
    $('#generate-music').on('click', function(){
        var prompt = $('[name=prompt]').val();
        if(prompt == ''){
            layer.msg('请输入提示词');
            return;
        }
        var lyrics = $('[name=lyrics]').val();
        if(lyrics == ''){
            layer.msg('请输入歌词');
            return;
        }
        var model = $('[name=model] option:selected').val()
        let formData = {
            prompt: prompt,
            lyrics: lyrics,
            model: model,
        }
        generateMusic(formData);
    });
    function generateMusic(formData){
        layerIndex = layer.msg('提交', {icon: 16, shade: 0.01, time: 100000});
        $.ajax({
            url: 'https://api.mureka.ai/v1/song/generate',
            type: 'POST',
            headers: {
                "Authorization": `Bearer ${AUTH_KEY}`
            },
            contentType: 'application/json',
            data: JSON.stringify(formData),
            success: function(res){
                layer.close(layerIndex)
                if(res.status !== 'succeeded'){
                    layerStatus = res.status
                    layerIndex = layer.msg(layerStatus, {icon: 16, shade: 0.01, time: 100000});
                    queryTask(res.id)
                }
            }
        })
    }
    function queryTask(id){
        $.ajax({
            url: 'https://api.mureka.ai/v1/song/query/' + id,
            type: 'GET',
            headers: {
                "Authorization": `Bearer ${AUTH_KEY}`
            },
            success: function(res){
                if(res.status !== 'succeeded'){
                    if(res.status !== layerStatus){
                        layerStatus = res.status
                        layerIndex = layer.msg(layerStatus, {icon: 16, shade: 0.01, time: 100000});
                    }
                    queryTask(id)
                }else{
                    layer.close(layerIndex)
                    layerIndex = layer.alert('生成成功，点击下载', {
                        icon: 1, 
                        shade: 0.01, 
                        btn: ['歌曲1', '歌曲2'],
                        btn1: function(){
                            window.open(res.choices[0].url)
                            return false
                        },
                        btn2: function(){
                            window.open(res.choices[1].url)
                            return false
                        }
                    },);
                }
            }
        })
    }

});

</script>
</html>